<template>
<el-form>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item
        label="【题型】:"
      >
      {{rowData.questionType}}
  </el-form-item>
    </el-col>
  <el-col :span="6">
    <el-form-item
    label="【编号】:"
    prop="id"
  >
  {{rowData.id}}
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item
    label="【难度】:"
    prop="difficulty"
  >
  {{rowData.difficulty}}
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item
    label="【标签】:"
    prop="tags"
  >
  {{rowData.tags}}
  </el-form-item>
  </el-col>
  </el-row>
  <el-row>
  <el-col :span="6">
    <el-form-item
    label="【学科】:"
    prop="subjectID"
  >
  {{rowData.subjectID}}
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item
    label="【目录】:"
    prop="catalogID"
  >
  {{rowData.catalogID}}
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item
    label="【方向】:"
    prop="direction"
  >
  {{rowData.direction}}
  </el-form-item>
  </el-col>
  </el-row>
  <hr>
  <el-form-item
    label="【题干】:"
    prop="question"
  >
  {{rowData.question}}
  </el-form-item>
  <el-form-item
    label="【参考答案】:" 
  >
  <el-button type="danger" @click="vediobtn">视频答案预览</el-button>
  </el-form-item>
  <div class="input_video" v-if="isShowRedio">
    <video-player  class="video-player vjs-custom-skin"
                   ref="videoPlayer"
                   :playsinline="true"
                   :options="playerOptions"
    ></video-player>
  </div>
  <el-form-item
    label="【答案解析】:"
    prop="answer"
  >
  </el-form-item>
  <el-form-item
    label="【题目备注】:"
    prop="remarks"
  >
  {{rowData.remarks}}
  </el-form-item>
  <el-form-item>
    <el-button type="primary" style="float: right" @click="$emit('back')">关闭</el-button>
  </el-form-item>
</el-form>


</template>
<script>
export default {
    data() {
      return {
        dialogVisible: true, 
        isShowRedio: false,
        //redio
        playerOptions : {
                    playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
                    autoplay : false, //如果true,浏览器准备好时开始回放。
                    muted : false, // 默认情况下将会消除任何音频。
                    loop : false, // 视频一结束就重新开始。
                    preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language : 'zh-CN',
                    aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources : [ {
                        type : "",
                        src : this.rowData.videoURL//url地址
                    } ],
                    poster : "", //你的封面地址
                    // width: document.documentElement.clientWidth,
                    notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar : {
                        timeDivider : true,//当前时间和持续时间的分隔符
                        durationDisplay : true,//显示持续时间
                        remainingTimeDisplay : false,//是否显示剩余时间功能
                        fullscreenToggle : true  //全屏按钮
                    }
                }
      };
    },
    props:{
      rowData:{
        type:Object,
        default:{}
      },
    },
    methods: {
     vediobtn(){
       this.isShowRedio = true
     }
    }
  }
  
</script>

<style scoped lang='scss'>
.input_video{
        width: 40%;
        margin: 0 auto;
        margin-left: 10px;
    }
</style>